<?php 
	require_once("database/db_connect.php");
	require_once("database/db_mars_get_set.php");
	require_once("database/get_xml.php");
	require_once("modules.php");
?>
<!DOCTYPE html>
<html>
<head>
    <title>Last ten recorded temperatures and pressures</title>
    <link href='http://fonts.googleapis.com/css?family=Squada+One|Changa+One|Geo|Righteous|Coda|Aldrich' rel='stylesheet' type='text/css'>
	<link href="styles/kendo.common.min.css" rel="stylesheet" />
	<link href="styles/style.css" type="text/css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
	<style type="text/css">
		form {
			margin-bottom: 20px;
			font-size: 25px;
			font-weight: bold;
			font-family: 'Geo';
		}
		
		form label[for] {
			font-size: 25px;
			font-weight: normal;
		}
	</style>
</head>
<body>
<!--<style scoped>
                #gauge-container {
                    text-align: center;
                    margin: 0 auto;
                    padding: 18px;
                    width: 300px;
                    height: 300px;
                }

                #gauge {
                    height: 300px;
                    display: inline-block;
                    *display: inline;
                    zoom: 1;
                }
            </style>-->
	
	<?php getHeader(); ?>
<div class="container">
  <div class="content">
  <h2 style="font-family: Coda, Arial, sans-serif; font-size: 28px; color:#ff9320;">Last ten recorded temperatures and pressures</h2>
  <div id="temperature" class="k-content"></div>
  <div id="pressure" class="k-content" >
            <div class="chart-wrapper k-content">
                <div id="chart" ></div>
                <div id="pressureChart"></div>
               <!--<div id="daylightChart"></div>-->
	<!--<div id="thermometer" class="k-content" style="width:100px">
            <div id="gauge-container">
                <div id="gauge"></div>
            </div>-->
	  </div>
	  </div>
	  </div>
     <aside class="sidebar1">
    <form method="get" action="#">
	<label>What will be the weather like on Mars tomorrow?</label><br />
	<input type="radio" name="weather" id="sunny" /><label for="sunny">Sunny</label><br />
	<input type="radio" name="weather" id="cloudy" /><label for="cloudy">Cloudy</label><br />
	<input type="radio" name="weather" id="windy" /><label for="windy">Windy</label><br />
	<input type="radio" name="weather" id="sandstormy" /><label for="sunny">(Sand)stormy</label><br />
	<input type="submit" value="Submit"/>
	</form>
	<p>
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
      <a class="twitter-timeline"  href="https://twitter.com/MarsCuriosity"  data-widget-id="325376454584041473">Tweets by @MarsCuriosity</a> 
      <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
    <!-- end .sidebar1 --></aside>
  <!-- end .container --></div>
<div id="mars"></div>   
            </div>
            <script>
			var result = <?php 
				$currentConnection = CreateNewDBConnection();
				$myArray = array();
				if ($result = $currentConnection->query("SELECT * FROM (SELECT * FROM weather ORDER BY `sol` DESC LIMIT 10) AS last ORDER BY last.sol")) {
				    while($row = $result->fetch_array(MYSQL_ASSOC)) {
						$myArray[] = $row;
    				}
					
    			echo json_encode($myArray).";";
				}

	$result->close();
	$currentConnection->close();
			 ?>
                function createTemperatureChart() {
                    $("#chart").kendoChart({
                        dataSource: {
                            data: result
                        },
						chartArea: {
							background: "#4d4d4d"
						},
                        title: {
                            text: "Temperature"
                        },
                        legend: {
                            position: "bottom",
							labels: {
								color:"#d6d6d6"
							}
                        },
                        seriesDefaults: {
                            type: "line",
                        },
                        series: [{
                            name: "Minimal temperature",
                            field: "min_temp",
							
                        },
						{
                            name: "Maximal temperature",
                            field: "max_temp"
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}",
								color: "#d6d6d6"
                            },
                            line: {
                                visible: false
                            },
                            axisCrossingValue: 0
                        },
                        categoryAxis: {
							labels: {
								color: "#d6d6d6"
							},
                            field: "sol",
                            majorGridLines: {
                                visible: false
                            }},
                        tooltip: {
                            visible: true,
                            format: "{0}%",
                            template: "#= value #"
                        }
						
                    });
                
				}
				
				function createPressureChart() {
                    $("#pressureChart").kendoChart({
                        dataSource: {
                            data: result
                        },
						chartArea: {
							background: "#4d4d4d"
						},
                        title: {
                            text: "Average pressure"
                        },
                        legend: {
                            position: "bottom",
							labels: {
								color:"#d6d6d6"
							}
                        },
                        seriesDefaults: {
                            type: "line",
                        },
                        series: [{
                            name: "Average pressure",
                            field: "pressure",
							
                        }],
                        valueAxis: {
                            labels: {
                                format: "{0}",
								color: "#d6d6d6"
                            },
                            line: {
                                visible: false
                            },
                            axisCrossingValue: 0
                        },
                        categoryAxis: {
                            field: "sol",
							labels: {
								color: "#d6d6d6"
							},
                            majorGridLines: {
                                visible: false
                            }},
                        tooltip: {
                            visible: true,
                            format: "{0}",
                            template: "#= value #"
                        }
						
                    });
                
				}
				
                function createGauges() {
                    var value = 30;

                    $("#gauge").kendoLinearGauge({
                        pointer: {
                            value: 28
                        },

                        scale: {
                            majorUnit: 20,
                            minorUnit: 2,
                            min: -40,
                            max: 60,
                            vertical: true,
                            ranges: [
                                {
                                    from: -40,
                                    to: -20,
                                    color: "#2798df"
                                }, {
                                    from: 30,
                                    to: 45,
                                    color: "#ffc700"
                                }, {
                                    from: 45,
                                    to: 60,
                                    color: "#c20000"
                                }
                            ]
                        }
                    });
                }
				
				$(document).ready(function() {
                    setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createTemperatureChart();

                        $("#temperature").bind("kendo:skinChange", function(e) {
                            createTemperatureChart();
                        });
                    },400);
					setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createPressureChart();

                        $("#daylight").bind("kendo:skinChange", function(e) {
                            createPressureChart();
                        });
                    },400);
					
					/*setTimeout(function() {
                        // Initialize the chart with a delay to make sure
                        // the initial animation is visible
                        createDaylightChart();

                        $("#daylight").bind("kendo:skinChange", function(e) {
                            createDaylightChart();
                        });
                    },400);
					*/
					createGauges();

                    $(document).bind("kendo:skinChange", function(e) {
                        createGauges();
                    });
                });
            </script>

        </div>
				
				<!--function createDaylightChart() {
				$("#daylightChart").kendoChart({
					    dataSource: {
                            data: result
                        },
                        title: {
                            text: "Daylight hours"
                        },
                        legend: {
                            position: "bottom"
                        },
                        seriesDefaults: {
                            type: "area",
							stack: false
                        },
                        series: [{
                            name: "Sunrise",
                            field: "sunrise",
							
                        },
						{
						name: "Sunset",
						field: "sunset",
							
                        }],
                        valueAxis: {
							baseUnit: "hours",
                            labels: {
                                format: "{0}",
                            },
                            line: {
                                visible: true
                            },
                            axisCrossingValue: 0
                        },
                        categoryAxis: {
                            field: "sol",
                            majorGridLines: {
                                visible: true
                            }},
                        tooltip: {
                            visible: true,
                            format: "{0}",
                            template: "#= value #"
                        }
            });
        }-->
</body>
</html>